import { DictType, MetaType } from "../util/publicType";
import {
  FlatList,
  StyleSheet,
  Text,
  TouchableOpacity
} from "react-native";
import { CommonConfig } from "../util";
// 纵向列表tab
interface PropType {
  data: Array<DictType>;
  id: string,
  setId: (v: string) => void,
  resetFunc: () => MetaType
}

const Index = ({ data = [], id = "", setId, resetFunc }: PropType) => {

  // 列表元素
  const renderItem = ({ item }: { item: DictType }) => {
    return (
      <TouchableOpacity
        key={item.id}
        activeOpacity={0.6}
        onPress={() => {
          resetFunc();
          setId(item.id);
        }}
      >
        <Text
          style={[id === item.id ? renderStyles.active : renderStyles.item, renderStyles.publicStyle]}>
          {item.name}
        </Text>
      </TouchableOpacity>
    );
  };

  return (
    <FlatList
      renderItem={renderItem}
      horizontal={false}
      showsVerticalScrollIndicator={false}
      style={renderStyles.box}
      data={data}
    ></FlatList>
  );
};

const renderStyles = StyleSheet.create({
  box: {
    width: "100%",
    // 去除底部tab距离
    marginBottom: 103
  },
  item: {
    backgroundColor: "#fff",
    color: "#111",
    borderLeftWidth:0,
  },
  active: {
    backgroundColor: CommonConfig.bgColor,
    color:CommonConfig.color,
    borderLeftWidth:3,
    borderLeftColor:CommonConfig.color,
  },
  publicStyle: {
    fontSize: 12,
    padding: 6,
    width: "100%",
    textAlign: "center"
  }
});

export default Index;
